<template>
	<view class="">
		<!-- v-if="orderStatus !== -1" -->
		<Top :title="title" :Orange="true"></Top>
		<!-- 新娘妆预约信息详情 -->
		<block v-if="orderDetails.w_type == 1">
			<view class="status">
				<view v-if="orderDetails.dress_wedding.status == 0" class="pre-pay">已预约</view>
				<view v-if="orderDetails.dress_wedding.status == 5" class="pre-pay">已取消</view>
				<view v-if="orderDetails.dress_wedding.status == 6" class="pre-pay">未成交</view>
				<view v-if="orderDetails.dress_wedding.status == 4" class="pre-pay">已成交</view>
			</view>
			<view class="orderDetails">
				<view class="flex align-center">
					<view style="font-size: 0">
						<image class="shoppic" :src="orderDetails.shop.avatar_url"></image>
					</view>
					<view class="shopname">
						{{ orderDetails.shop.shopname }}
					</view>
				</view>
				<view class="flex align-center" style="margin-top: 26rpx">
					<view style="font-size: 0; margin-right: 30rpx">
						<image class="pic" :src="orderDetails.dress.image_src"></image>
					</view>
					<view class="flex flex-1 flex-clum justify-around" style="height: 164rpx">
						<view class="title">
							{{ orderDetails.dress.title }}
						</view>
					</view>
				</view>
			</view>
			<view class="orderInfo">
				<view class="flex align-center">
					<view class="label">预约人：</view>
					<view class="bold">{{ orderDetails.dress_wedding.name }}</view>
				</view>
				<view class="flex align-center">
					<view class="label">预约电话：</view>
					<view class="bold">{{ orderDetails.dress_wedding.phone }}</view>
				</view>
				<view class="flex align-center">
					<view class="label">开始时间：</view>
					<view class="bold">{{ orderDetails.dress_wedding.time_star }}</view>
				</view>
				<view class="flex align-center">
					<view class="label">结束时间：</view>
					<view class="bold">{{ orderDetails.dress_wedding.time_end }}</view>
				</view>
			</view>
		</block>
		<!-- 婚纱订单详情信息 -->
		<block v-else>
			<view class="status">
				<template v-if="orderStatus !== 8 && orderStatus !== 7 && orderStatus !== 9">
					<view class="flex align-center justify-center">
						<!-- 待排期 点 -->
						<view class="flex align-center justify-center" style="width: 24rpx; height: 24rpx; border-radius: 50%; background: #fff">
							<view class="" v-if="[10, 20, 0, 1, 2, 3, 4].indexOf(orderStatus) == -1" style="width: 20rpx; height: 20rpx; background: #844902; border-radius: 50%"></view>
						</view>
						<!-- 待排期->待拍摄 -->
						<view v-if="[20, 0, 1, 2, 3, 4].indexOf(orderStatus) == -1" class="" style="height: 6rpx; background: #844902; width: 103rpx"></view>
						<view v-else class="" style="height: 6rpx; background: #fff; width: 103rpx"></view>

						<!-- 待拍摄 点 -->
						<view class="flex align-center justify-center" style="width: 24rpx; height: 24rpx; border-radius: 50%; background: #fff">
							<view class="" v-if="[20, 0, 1, 2, 3, 4].indexOf(orderStatus) == -1" style="width: 20rpx; height: 20rpx; background: #844902; border-radius: 50%"></view>
						</view>
						<!-- 待拍摄->待选样 -->
						<view v-if="[1, 2, 3, 4].indexOf(orderStatus) == -1" class="" style="height: 6rpx; background: #844902; width: 103rpx"></view>
						<view v-else class="" style="height: 6rpx; background: #fff; width: 103rpx"></view>

						<!-- 待选样 点 -->
						<view class="flex align-center justify-center" style="width: 24rpx; height: 24rpx; border-radius: 50%; background: #fff">
							<view v-if="[1, 2, 3, 4].indexOf(orderStatus) == -1" class="" style="width: 20rpx; height: 20rpx; background: #844902; border-radius: 50%"></view>
						</view>
						<!-- 待选样->待看板 -->
						<view v-if="[2, 3, 4].indexOf(orderStatus) == -1" class="" style="height: 6rpx; background: #844902; width: 103rpx"></view>
						<view v-else class="" style="height: 6rpx; background: #fff; width: 103rpx"></view>

						<!-- 待看板 点 -->
						<view class="flex align-center justify-center" style="width: 24rpx; height: 24rpx; border-radius: 50%; background: #fff; font-size: 0">
							<view class="" v-if="[2, 3, 4].indexOf(orderStatus) == -1" style="width: 20rpx; height: 20rpx; background: #844902; border-radius: 50%"></view>
						</view>
						<!-- 待看板->待取件 -->
						<view v-if="[3, 4].indexOf(orderStatus) == -1" class="" style="height: 6rpx; background: #844902; width: 103rpx"></view>
						<view v-else class="" style="height: 6rpx; background: #fff; width: 103rpx"></view>

						<!-- 待取件 点 -->
						<view class="flex align-center justify-center" style="width: 24rpx; height: 24rpx; border-radius: 50%; background: #fff">
							<view v-if="[3, 4].indexOf(orderStatus) == -1" class="" style="width: 20rpx; height: 20rpx; background: #844902; border-radius: 50%"></view>
						</view>
						<!-- 待取件->已结束 -->
						<view v-if="[4].indexOf(orderStatus) == -1" class="" style="height: 6rpx; background: #844902; width: 103rpx"></view>
						<view v-else class="" style="height: 6rpx; background: #fff; width: 103rpx"></view>

						<!-- 已结束 点 -->
						<view class="flex align-center justify-center" style="width: 24rpx; height: 24rpx; border-radius: 50%; background: #fff">
							<view v-if="[4].indexOf(orderStatus) == -1" class="" style="width: 20rpx; height: 20rpx; background: #844902; border-radius: 50%"></view>
						</view>
					</view>
					<view class="flex align-center justify-between" style="margin-top: 22rpx; font-size: 24rpx">
						<view class="" :style="[10, 20, 0, 1, 2, 3, 4].indexOf(orderStatus) != -1 ? 'color: rgba(255,255,255,0.8);' : 'color: #844902;'">待排期</view>
						<!-- !(orderStatus<=9) -->
						<view class="" :style="[20, 0, 1, 2, 3, 4].indexOf(orderStatus) != -1 ? 'color: rgba(255,255,255,0.8);' : 'color: #844902;'">待拍摄</view>
						<view class="" :style="[1, 2, 3, 4].indexOf(orderStatus) != -1 ? 'color: rgba(255,255,255,0.8);' : 'color: #844902;'">待选样</view>
						<view class="" :style="[2, 3, 4].indexOf(orderStatus) != -1 ? 'color: rgba(255,255,255,0.8);' : 'color: #844902;'">待看板</view>
						<view class="" :style="[3, 4].indexOf(orderStatus) != -1 ? 'color: rgba(255,255,255,0.8);' : 'color: #844902;'">待取件</view>
						<view class="" :style="[4].indexOf(orderStatus) != -1 ? 'color: rgba(255,255,255,0.8);' : 'color: #844902;'">已结束</view>
					</view>
				</template>
				<view v-if="orderStatus == 8" class="pre-pay">待支付</view>
				<view v-if="orderStatus == 9" class="pre-pay">余款未结</view>
				<view v-if="orderStatus == 7" class="pre-pay">已取消</view>
			</view>
			<!-- 商品信息 -->
			<view class="orderDetails">
				<view class="flex align-center">
					<view class="" style="font-size: 0">
						<image class="shoppic" :src="orderDetails.shop.avatar_url"></image>
					</view>
					<view class="shopname">
						{{ orderDetails.shop.shopname }}
					</view>
				</view>
				<view v-for="(item, index) in orderDetails.goods" :key="index" class="flex align-center" style="margin-top: 26rpx">
					<view class="" style="font-size: 0; margin-right: 30rpx">
						<image class="pic" :src="item.image_src"></image>
					</view>
					<view class="flex flex-1 flex-clum justify-around" style="height: 164rpx">
						<view class="title">
							{{ item.title }}
						</view>
						<view class="" style="color: #e4493a; font-weight: 500">
							<span style="font-size: 22rpx">￥</span>
							<span style="font-size: 36rpx">{{ item.price }}</span>
							<span style="font-size: 24rpx; color: #999; margin-left: 12rpx; text-decoration: line-through">￥</span>
							<span style="font-size: 24rpx; color: #999; text-decoration: line-through">{{ item.price }}</span>
						</view>
					</view>
				</view>
			</view>
			<!-- 套餐 -->
			<view
				class="flex"
				v-if="orderDetails.goods && orderDetails.goods[0] && orderDetails.goods[0].difference.spec.length != 0"
				style="margin: 0 32rpx; border-radius: 0 0 16rpx 16rpx; background: #fff; padding: 6rpx 32rpx 34rpx 32rpx"
			>
				<view class="" style="font-size: 24rpx; font-weight: 700; color: #000; margin-right: 24rpx">已购套餐</view>
				<view class="flex-1" style="font-size: 24rpx; color: #888">
					<view v-for="(item, index) in orderDetails.goods[0].difference.spec" :key="index" class="flex align-center" style="margin-bottom: 12rpx">
						<view class="flex-1 text-overflow1">{{ item.name }}X{{ item.number }}</view>
						<view class="" style="margin-left: 90rpx">¥{{ item.price }}</view>
					</view>
				</view>
			</view>
			<!-- 赠品 -->
			<view
				class="flex"
				v-if="orderDetails.goods && orderDetails.goods[0].gift.length != 0"
				style="margin: 0 32rpx; border-radius: 0 0 16rpx 16rpx; background: #fff; padding: 6rpx 32rpx 34rpx 32rpx"
			>
				<view class="" style="font-size: 24rpx; font-weight: 700; color: #000; margin-right: 24rpx">免费赠品</view>
				<view class="flex-1" style="font-size: 24rpx; color: #888888">
					<view v-for="(item, index) in orderDetails.goods[0].gift" class="flex align-center" style="margin-bottom: 12rpx">
						<view
							class="flex-1"
							style="
								display: -webkit-box;
								overflow: hidden;
								white-space: normal;
								text-overflow: ellipsis;
								word-wrap: break-word;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							"
						>
							{{ spceType(item.name, item.difference, item.spec_type) }}
							X{{ item.number }}
						</view>
						<view class="" style="margin-left: 90rpx">¥{{ item.price }}</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view v-if="orderStatus !== 7" class="orderInfo">
				<view class="flex align-center">
					<view class="label">推荐人：</view>
					<view v-if="orderDetails.referr != null && JSON.stringify(orderDetails.referr) != '[]'" class="bold">
						{{ orderDetails.referr.name }}（{{
							orderDetails.referr.iden == 1
								? '注册会员'
								: orderDetails.referr.iden == 2
								? '店铺会员'
								: orderDetails.referr.iden == 3
								? '商家职员'
								: orderDetails.referr.iden == 4
								? '城市合伙人'
								: orderDetails.referr.iden == 5
								? '店铺合伙人'
								: ''
						}}）
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">订单编号：</view>
					<view class="bold">
						{{ orderDetails.order_no || '' }}
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">下单时间：</view>
					<view class="bold">
						{{ orderDetails.createtime_text || '' }}
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx" v-if="goodsDetail.send_type != 2">
					<view class="label">订单人：</view>
					<view class="bold">
						{{ orderDetails.username || '' }}
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">订单电话：</view>
					<view class="bold">
						{{ (orderDetails.mobile && orderDetails.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')) || '' }}
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">支付方式：</view>
					<view class="bold">
						{{
							!goodsDetail.paymenttime
								? '待支付'
								: orderDetails.pay.pay_type == 0
								? '充值支付'
								: orderDetails.pay.pay_type == 1
								? '微信支付'
								: orderDetails.pay.pay_type == 2
								? '支付宝支付'
								: orderDetails.pay.pay_type == 3
								? '混合支付'
								: ''
						}}
						{{ goodsDetail.paymenttime ? (goodsDetail.pay.is_prepay == 1 ? '（定金支付）' : '（全款支付）') : '' }}
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">拍摄类型：</view>
					<view class="bold">
						{{ orderDetails.w_info.type.name || '' }}
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">拍摄档期：</view>
					<view class="bold">
						{{ orderDetails.w_info.time || '未定' }}
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">摄影师：</view>
					<view class="bold">
						{{ orderDetails.w_info.suser.name || '未定' }}
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">摄影费用：</view>
					<view class="bold">¥{{ orderDetails.w_info.s_price || '' }}</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">化妆师：</view>
					<view class="bold">
						{{ orderDetails.w_info.zuser.name || '未定' }}
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">化妆费用：</view>
					<view class="bold">¥{{ orderDetails.w_info.z_price || '' }}</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx" v-if="orderDetails.pay && orderDetails.pay.coupon_id && orderDetails.pay.coupon_id.length">
					<view class="label">优惠券：</view>
					<view class="bold">¥{{ orderDetails.pay.discount_price || '' }}</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx" v-else>
					<view class="label">会员优惠：</view>
					<view class="bold">¥{{ orderDetails.pay.discount_price || '' }}</view>
					{{orderDetails.pay.coupon_id}}
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">充值支付：</view>
					<view class="bold">¥{{ orderDetails.pay.balance_price || '' }}</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">商品总额：</view>
					<view class="bold">¥{{ orderDetails.pay.total_amount || '' }}</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">成交金额：</view>
					<view class="bold">¥{{ orderDetails.order_price >= 0 ? orderDetails.order_price : '' }}</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">微信支付：</view>
					<view class="bold">¥{{ orderDetails.pay.wechat_price || '' }}</view>
				</view>
				<view v-if="orderDetails.pay.is_prepay == 1" class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">定金支付：</view>
					<view class="bold">
						￥{{ orderDetails.deposit }}
						<text style="color: red" v-if="orderDetails.state == 1 && orderDetails.paymenttime == null" class="bold">(未付)</text>
						<text style="color: green" v-if="orderDetails.state == 1 && orderDetails.paymenttime !== null" class="bold">(已付)</text>
						<text style="color: green" v-if="orderDetails.state >= 2 && orderDetails.paymenttime !== null" class="bold">(已付)</text>
					</view>
				</view>
				<view v-if="orderDetails.pay.is_prepay == 1" class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">剩余尾款：</view>
					<view class="bold">
						￥{{ orderDetails.balance_price }}
						<text style="color: red" v-if="orderDetails.state == 1 && orderDetails.paymenttime !== null" class="bold">(未付)</text>
						<text style="color: red" v-if="orderDetails.state == 1 && orderDetails.paymenttime == null" class="bold">(未付)</text>
						<text style="color: green" v-if="orderDetails.state >= 2 && orderDetails.paymenttime !== null" class="bold">(已付)</text>
					</view>
				</view>
				<view class="flex align-center" style="font-size: 24rpx; margin-bottom: 20rpx">
					<view class="label">备注：</view>
					<view class="bold">
						{{ orderDetails.remarks || '' }}
					</view>
				</view>
			</view>
			<!-- 商家看到的操作记录 -->
			<!-- v-if="orderInfo.is_mange==1&&orderDetails.w_log.length!=0" -->
			<view
				v-if="JSON.stringify(orderDetails.w_log) != '[]' && orderStatus !== 7"
				class="flex align-center"
				style="background: #ffffff; border-radius: 16rpx; margin: 20rpx 32rpx; padding: 20rpx 28rpx"
			>
				<view class="flex-1 flex flex-clum align-center justify-center" :style="'padding-bottom: ' + 2 * 12 + 'rpx;'">
					<view class="flex flex-clum align-center justify-center" v-if="index != 0" v-for="(item, index) in orderDetails.w_log" :key="index">
						<view class="" style="width: 12rpx; height: 12rpx; background: #ebbe87; border-radius: 50%"></view>
						<view class="" style="width: 4rpx; height: 77rpx; background: #ebbe87"></view>
						<view class="" v-if="index == orderDetails.w_log.length - 1" style="width: 12rpx; height: 12rpx; background: #ebbe87; border-radius: 50%"></view>
					</view>
				</view>
				<view class="">
					<view
						class="flex align-center justify-between"
						v-for="(item, index) in orderDetails.w_log"
						:key="index"
						style="background: #f4f4f4; border-radius: 8rpx; width: 592rpx; height: 70rpx; margin-bottom: 20rpx"
					>
						<view class="flex-1 msg">{{ item.content }}{{ item.status_text ? '（' + item.status_text + '）' : '' }}：{{ item.user.name }}</view>
						<view class="time">
							{{ item.createtime | handleTime }}
						</view>
					</view>
				</view>
			</view>
			<!-- 底部按钮 占位置 -->
			<view
				v-if="orderInfo.is_mange == 1 && orderStatus !== 8 && [20, 1, 2, 3].indexOf(orderStatus) != -1"
				class=""
				style="border-radius: 8px; margin: 10px 16px 0 16px; background: #fff"
			>
				<view class="flex align-center justify-end" style="border-radius: 8px; margin: 10px 16px 0 16px; padding: 14px 10px; background: #fff">
					<view class="flex-1"></view>
					<view
						v-if="[-1, 20].indexOf(orderStatus) != -1"
						@click="changeTime"
						class="flex align-center justify-center"
						style="width: 200rpx; height: 58rpx; border-radius: 30rpx; border: 1rpx solid #cccccc; font-size: 22rpx; font-weight: 700; color: #333333; margin-right: 32rpx"
						:style="orderStatus == -1 ? 'background: #999999;' : ''"
					>
						档期/老师调整
					</view>
					<view
						@click="handle(orderInfo, orderStatus, 0)"
						v-if="orderDetails.wedding && orderDetails.wedding.u_type != 3 && [1, 2, 3].indexOf(orderStatus) != -1"
						class="flex align-center justify-center"
						style="
							margin-right: 32rpx;
							border-radius: 30rpx;
							width: 156rpx;
							height: 58rpx;
							background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
							font-size: 22rpx;
							color: #ffffff;
							font-weight: 700;
						"
						:style="orderStatus == -1 ? 'background: #999999;' : ''"
					>
						确认{{ orderStatus == 10 ? '排期' : orderStatus == 20 ? '拍摄' : orderStatus == 1 ? '选样' : orderStatus == 2 ? '看板' : orderStatus == 3 ? '取件' : '' }}
					</view>
					<view
						@click="handle(orderInfo, orderStatus, 1)"
						v-if="orderStatus == 2 && orderDetails.wedding.u_type != 3 && [1, 2, 3].indexOf(orderStatus) != -1"
						class="flex align-center justify-center"
						style="
							margin-left: 32rpx;
							margin-right: 32rpx;
							border-radius: 30rpx;
							width: 156rpx;
							height: 58rpx;
							background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
							font-size: 22rpx;
							color: #ffffff;
							font-weight: 700;
						"
					>
						确认{{ orderStatus == 10 ? '排期' : orderStatus == 20 ? '拍摄' : orderStatus == 1 ? '选样' : orderStatus == 2 ? '不看板' : orderStatus == 3 ? '取件' : '' }}
					</view>
				</view>
			</view>
			<view class="" style="height: 68rpx"></view>
			<!-- 调整档期弹窗 -->
			<uni-popup ref="showTime" type="bottom" backgroundColor="transparent">
				<view class="" style="padding: 0 0 40rpx 0; background: #ffffff; border-radius: 32rpx 32rpx 0 0; overflow: hidden">
					<view class="flex align-center justify-between" style="background: linear-gradient(180deg, #fff7ea 0%, rgba(255, 255, 255, 0) 100%); padding: 28rpx 32rpx 0 32rpx">
						<view class="" style="font-size: 0" @click="closeTime">
							<image style="width: 27rpx; height: 27rpx" src="../../static/shopping/cha.png" mode=""></image>
						</view>
						<view class="" style="font-size: 28rpx; color: #111">
							当前，{{ s_name || '' }}
							<span style="color: #666666">（摄影师）</span>
							，{{ z_name || '' }}
							<span style="color: #666666">（化妆师）</span>
						</view>
						<view class=""></view>
					</view>
					<view class="flex justify-between" style="padding: 50rpx 0 30rpx 0; margin: 0 32rpx; border-bottom: 2rpx solid #f4f4f4">
						<view class="flex align-center" style="font-size: 30rpx; color: #666666">档期</view>
						<view class="flex align-center" @click="openp" style="font-size: 30rpx; color: #666666">
							<view class="" style="font-size: 30rpx; color: #111111">
								{{ n_time == '' ? now_time : n_time }}
							</view>
							<view class="" style="font-size: 0; padding: 24rpx">
								<image style="width: 12rpx; height: 18rpx" src="../../static/personal/right_jian.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="flex justify-around" style="padding: 40rpx 0 24rpx 0">
						<view class="" style="font-size: 30rpx; color: #111111">选择摄影师</view>
						<view class="" style="font-size: 30rpx; color: #111111">选择化妆师</view>
					</view>
					<!-- 滑动选择器 -->
					<view class="flex justify-center" style="text-align: center">
						<view class="flex justify-between" style="width: 535rpx">
							<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
								<picker-view-column>
									<!-- 	<view class="flex-1"
									style="display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
									不指定
								</view> -->
									<view class="picker-item" v-for="(item, index) in sList" :key="index">
										<view
											class="flex-1"
											style="
												display: -webkit-box;
												overflow: hidden;
												white-space: normal;
												text-overflow: ellipsis;
												word-wrap: break-word;
												-webkit-line-clamp: 1;
												-webkit-box-orient: vertical;
											"
										>
											{{ item.name }}
										</view>
										<view class="" :style="item.day_type != 1 ? 'color: #FF3F4A;' : ''" v-if="item.id">
											({{ item.day_type == 1 ? '空' : item.day_type == 2 ? '满' : item.day_type == 3 ? '休' : '' }})
										</view>
									</view>
								</picker-view-column>
							</picker-view>
							<picker-view :indicator-style="indicatorStyle" :value="value2" @change="bindChange2" class="picker-view">
								<picker-view-column>
									<!-- <view class="flex-1"
									style="display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
									不指定
								</view> -->
									<view class="picker-item" v-for="(item, index) in zList" :key="index">
										<view
											class="flex-1"
											style="
												display: -webkit-box;
												overflow: hidden;
												white-space: normal;
												text-overflow: ellipsis;
												word-wrap: break-word;
												-webkit-line-clamp: 1;
												-webkit-box-orient: vertical;
											"
										>
											{{ item.name }}
										</view>
										<view class="" :style="item.day_type != 1 ? 'color: #FF3F4A;' : ''" v-if="item.id">
											({{ item.day_type == 1 ? '空' : item.day_type == 2 ? '满' : item.day_type == 3 ? '休' : '' }})
										</view>
									</view>
								</picker-view-column>
							</picker-view>
						</view>
					</view>
					<!-- 确定按钮 -->
					<view
						v-if="allow_edit_staff"
						@click="confirmUpdate"
						class="flex align-center justify-center"
						style="background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%); border-radius: 40rpx; font-size: 28rpx; color: #ffffff; padding: 30rpx 0; margin: 0 32rpx"
					>
						确定
					</view>
					<view
						v-else
						class="flex align-center justify-center"
						style="background: linear-gradient(154deg, #d3d3d3 0%, #a9a9a9 100%); border-radius: 40rpx; font-size: 28rpx; color: #ffffff; padding: 30rpx 0; margin: 0 32rpx"
					>
						等待客户确认档期
					</view>
				</view>
			</uni-popup>
			<!-- 选择档期 -->
			<uni-popup ref="popups" type="bottom" backgroundColor="white">
				<choice :paiqiObj="paiqiObj" @rightArrow="rightArrow" @leftArrow="leftArrow" :year="year" :month="mouth" @clepop="clepop" @enterselect="goSelect"></choice>
			</uni-popup>
			<!-- 确认操作弹窗 -->
			<uni-popup ref="confirm" type="center">
				<view class="" style="width: 468rpx; height: 270rpx; background: #ffffff; border-radius: 32rpx; display: flex; flex-direction: column">
					<view
						class=""
						style="border-bottom: 2rpx solid #f4f4f4; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 700; color: #000"
					>
						是否确认此次提交状态？
					</view>
					<view class="" style="display: flex; align-items: center">
						<view
							class=""
							@click="cencle"
							style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 24rpx 0; font-size: 30rpx; color: rgba(0, 0, 0, 0.6); font-weight: 700"
						>
							取消
						</view>
						<view
							class=""
							@click="confirmHandle"
							style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 24rpx 0; font-size: 30rpx; color: #ebbe87; font-weight: 700"
						>
							确定
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 完成提示弹窗 -->
			<uni-popup ref="end" type="center">
				<view class="" style="width: 468rpx; height: 270rpx; background: #ffffff; border-radius: 32rpx; display: flex; flex-direction: column">
					<view
						class=""
						style="border-bottom: 2rpx solid #f4f4f4; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 700; color: #000"
					>
						需用户确认后改变订单状态！
					</view>
					<view class="" style="display: flex; align-items: center">
						<view
							class=""
							@click="cencle2"
							style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 24rpx 0; font-size: 30rpx; color: #ebbe87; font-weight: 700"
						>
							知道了
						</view>
					</view>
				</view>
			</uni-popup>
		</block>
	</view>
</template>

<script>
import Top from '@/components/navBox/top.vue';
import choice from './choice.vue';
export default {
	components: {
		Top,
		choice
	},
	data() {
		return {
			title: '订单详情',
			value: [0],
			value2: [0],
			indicatorStyle: `height: 50px;`,
			paiqiObj: {}, //查看档期数据
			// 当前日期
			year: '',
			mouth: '',
			orderInfo: {}, //订单列表信息
			orderDetails: {}, //订单详情
			orderStatus: 0,
			years: '',
			months: '',
			dayss: '',
			s_name: '',
			z_name: '',
			data: {}, //婚纱操作参数
			teacherList: [], //老师列表
			// 调换老师参数
			b_time: '', //调换前档期
			n_time: '', //调换后档期
			now_time: '',
			r_id: '', //预约ID
			z_price: '', //调换后造型师价格
			s_price: '', //调换后摄影师价格
			worker_s_id: '', //调换后摄影老师ID
			worker_z_id: '', //调换后造型老师ID
			z_id: '', //调换前造型老师ID
			s_id: '', //调换前摄影老师ID
			order_id: '',
			indes: '',
			sList: ['1', '2'], //摄影师列表
			zList: ['1', '2'], //造型师列表
			allow_edit_staff: false //修改摄影师和化妆师
		};
	},
	filters: {
		handleTime(e) {
			var time = new Date(e * 1000);
			var y = time.getFullYear();
			// 获取月
			var m = (time.getMonth() + 1).toString().padStart(2, '0');
			// 获取日
			var d = time.getDate().toString().padStart(2, '0');
			// 获取时
			var h = time.getHours().toString().padStart(2, '0');
			// 获取分
			var minute = time.getMinutes().toString().padStart(2, '0');
			// 获取秒
			var s = time.getSeconds().toString().padStart(2, '0');
			return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s;
		}
	},
	onLoad(options) {
		let date = new Date();
		this.years = date.getFullYear();
		this.mouthss = date.getMonth() + 1;
		this.dayss = date.getDate();
		this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo));
		this.changeOrderStatus(this.orderInfo);
		if (this.orderInfo.is_mange == 1) {
			// 商家管理端订单详情
			this.getManageInfo();
		} else {
			// 用户订单详情
			this.getOrderInfo();
		}
		this.year = this.getNowDate(1);
		this.mouth = this.getNowDate(2);
		this.dayss = this.getNowDate(3);
		this.now_time = this.year + '-' + this.mouth + '-' + this.dayss;
		let mouths = String(this.mouth).padStart(2);
		this.setTime(this.year + '-' + this.mouth);
	},
	methods: {
		//确认调换老师
		confirmUpdate() {
			if (this.sList[this.value[0]].day_type != 1) {
				uni.showToast({
					title: '摄影师档期不为空!',
					icon: 'none'
				});
				return;
			}
			if (this.zList[this.value2[0]].day_type != 1) {
				uni.showToast({
					title: '造型师档期不为空!',
					icon: 'none'
				});
				return;
			}
			this.$request({
				url: 'wedding/change_worker',
				method: 'POST',
				data: {
					b_time: this.b_time, //调换前档期
					n_time: this.n_time, //调换后档期
					r_id: this.r_id, //预约ID
					z_price: this.z_price, //调换后造型师价格
					s_price: this.s_price, //调换后摄影师价格
					worker_s_id: this.worker_s_id, //调换后摄影老师ID
					worker_z_id: this.worker_z_id, //调换后造型老师ID
					z_id: this.z_id, //调换前造型老师ID
					s_id: this.s_id, //调换前摄影老师ID
					order_id: this.order_id
				}
			}).then((res) => {
				this.closeTime();
				if (res.data.code == 1) {
					uni.showToast({
						title: '操作成功，等待客户同意',
						icon: 'none'
					});
					this.getManageInfo();
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		// 获取老师列表
		getTeacherList() {
			let time = '';
			if (this.n_time) {
				time = this.n_time;
			} else {
				time = this.now_time;
			}
			this.$request({
				url: 'wedding/worker_appointment_all',
				method: 'POST',
				data: {
					time: time,
					// time:'2023-12-09',
					// sys_id:this.r_id,
					sys_id: this.orderDetails.goods[0].goods_id
				}
			}).then((res) => {
				if (res.data.code == 1) {
					this.sList = res.data.data.s_info;
					this.zList = res.data.data.z_info;
					this.value[0] = 0;
					this.value2[0] = 0;

					this.sList.forEach((item, index) => {
						// this.orderDetails.w_info.suser.name == item.name
						if (this.orderDetails.appointmentLog && this.orderDetails.appointmentLog.worker_s_id == item.id) {
							this.value[0] = index;
						}
					});
					this.zList.forEach((item, index) => {
						// this.orderDetails.w_info.zuser.name == item.name
						if (this.orderDetails.appointmentLog && this.orderDetails.appointmentLog.worker_z_id == item.id) {
							this.value2[0] = index;
						}
					});
					if (this.sList.length != 0) {
						this.s_price = this.sList[this.value[0]].price; //调换后摄影师价格
						this.worker_s_id = this.sList[this.value[0]].id; //调换后造型老师ID
					}
					if (this.zList.length != 0) {
						this.z_price = this.zList[this.value2[0]].price; //调换后造型师价格
						this.worker_z_id = this.zList[this.value2[0]].id; //调换后摄影老师ID
					}
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
				this.$refs['showTime'].open();
			});
		},
		//用户订单详情
		getOrderInfo() {
			this.$request({
				url: 'order/getOrderInfo',
				data: {
					id: this.orderInfo.id
				}
			}).then((res) => {
				if (res.data.data.state === 7) {
					this.orderStatus = res.data.data.state;
				}
				if (res.data.data.state === 1 && res.data.data.paymenttime == null) {
					this.orderStatus = 8;
				}
				if (res.data.data.state === 1 && res.data.data.paymenttime !== null) {
					this.orderStatus = 9;
				}
				if (res.data.code == 1) {
					this.orderDetails = res.data.data;
					this.orderDetails.wedding = res.data.data.w_info;
					this.changeOrderStatus(res.data.data);
				} else {
					uni.showModal({
						title: '提示',
						content: res.data.msg,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								uni.navigateBack({});
							}
						}
					});
				}
			});
		},
		//商家管理订单详情
		getManageInfo() {
			this.$request({
				url: 'manage/getOrderdetail',
				method: 'POST',
				data: {
					id: this.orderInfo.id
				}
			}).then((res) => {
				if (res.data.data.state == 1) {
					this.orderStatus = 8;
				}
				this.orderDetails = res.data.data;
				this.s_name = res.data.data.appointmentLog.s_name;
				this.z_name = res.data.data.appointmentLog.z_name;
				this.orderDetails.wedding = res.data.data.w_info;
				this.allow_edit_staff = !this.orderDetails.appointmentLog.id || this.orderDetails.appointmentLog.status == 2 || this.orderDetails.appointmentLog.status == 1;
				this.changeOrderStatus(res.data.data);
				this.b_time = this.orderDetails.w_info.time; //调换前档期
				this.n_time = this.orderDetails.appointmentLog.n_time; //调换后档期
				this.r_id = this.orderDetails.w_id; //预约ID
				if (this.orderDetails.w_info.time) {
					this.year = this.orderDetails.w_info.time.split('-')[0];
					this.mouth = this.orderDetails.w_info.time.split('-')[1];
				}
				this.z_id = this.orderDetails.w_info.worker_z_id; //调换前造型老师ID
				this.s_id = this.orderDetails.w_info.worker_s_id; //调换前摄影老师ID
				this.order_id = this.orderInfo.id;
				if (this.orderInfo.chongxintiaohuan == 1) {
					this.changeTime();
				}
				if (this.orderDetails.dress) {
					this.title = this.orderDetails.dress_wedding.type ? '新娘妆预约详情' : '礼服预约详情';
				}
			});
		},
		// 点击调整档期
		changeTime() {
			if (this.orderStatus == -1) {
				return;
			}
			this.getTeacherList();
		},
		closeTime() {
			this.$refs['showTime'].close();
		},
		// 滑动选择器
		bindChange(e) {
			//0：未处理 1：客户同意 2：客户拒绝
			//未指定 或 指定后被拒绝
			if (this.allow_edit_staff) {
				console.log(111);
				this.value[0] = e.detail.value[0];
				this.s_price = this.sList[this.value[0]].price; //调换后摄影师价格
				this.worker_s_id = this.sList[this.value[0]].id; //调换后造型老师ID
				console.log(e);
				console.log(this.worker_s_id);
			}
		},
		bindChange2(e) {
			//0：未处理 1：客户同意 2：客户拒绝
			//未指定 或 指定后被拒绝
			if (this.allow_edit_staff) {
				this.value2[0] = e.detail.value[0];
				this.z_price = this.zList[this.value2[0]].price; //调换后造型师价格
				this.worker_z_id = this.zList[this.value2[0]].id; //调换后摄影老师ID
				console.log(e);
				console.log(this.worker_z_id);
			}
		},
		// 选择档期
		clepop() {
			this.$refs['popups'].close();
		},
		openp() {
			if (this.allow_edit_staff) {
				this.getManageInfo();
				this.$refs['popups'].open();
			}
		},
		goSelect(e) {
			if (!e) {
				uni.showToast({
					title: '请选择日期',
					icon: 'none'
				});
				return;
			}
			this.n_time = e;
			this.getTeacherList();
		},
		//查看档期 月份加减
		leftArrow() {
			if (this.mouth == this.getNowDate(2) && this.year == this.getNowDate(1)) {
				return;
			}
			this.mouth--;
			if (this.mouth < 1) {
				this.year--;
				this.mouth = 12;
			}
			this.setTime(this.year + '-' + String(this.mouth).padStart(2, '0'));
		},

		rightArrow() {
			this.mouth++;
			if (this.mouth > 12) {
				this.year++;
				this.mouth = 1;
			}
			this.setTime(this.year + '-' + String(this.mouth).padStart(2, '0'));
		},
		// 查看档期
		setTime(e) {
			this.$request({
				url: 'wedding/worker_time',
				method: 'POST',
				data: {
					worker_id: this.orderInfo.shop_id,
					time: e
				}
			}).then((res) => {
				let week = new Date(e + '-1').getDay();
				// 计算上个月的天数
				let years = 0;
				let months = 0;
				if (this.mouth - 1 < 1) {
					years = this.year - 1;
					months = 12;
				} else {
					years = this.year;
					months = this.mouth - 1;
				}
				let days = new Date(years, months, 0).getDate();
				for (let i = 0; i < week; i++) {
					let obj = {
						num: days - i,
						type: 4 //1空2满3休
					};
					res.data.data.date.unshift(obj);
				}
				for (let i = 0; i < res.data.data.date.length % 7; i++) {
					let obj = {
						num: i + 1,
						type: 4 //1空2满3休
					};
					res.data.data.date.push(obj);
				}
				this.paiqiObj = res.data.data;
			});
		},
		getNowDate(type) {
			let date = new Date();
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			if (type == 1) {
				return y;
			} else if (type == 2) {
				return m;
			} else if (type == 3) {
				return d;
			}
		},
		// 处理订单状态
		changeOrderStatus(item) {
			item.wedding = item.wedding ? item.wedding : item.w_info;

			if (item.wedding == null) {
				return;
			}
			if ((item.is_prepay == 0 && item.state == 1) || (item.is_prepay == 1 && item.refundstatus == 0 && item.state == 1 && !(item.paymenttime > 0))) {
				this.orderStatus = -1;
				return;
			}
			// 0/20:待拍摄 1：待选样 2：待看板 3：待取件 10：待排期 20：待拍摄
			if (item.state == 2 && item.wedding.status == 6 && item.paymenttime > 0 && item.wedding.u_type != 1) {
				this.orderStatus = 10;
			} else if (
				item.state == 2 &&
				((item.wedding.status == 6 && item.wedding.u_type == 1) || (item.wedding.status == 7 && item.wedding.u_type == 0) || (item.wedding.status == 1 && item.wedding.u_type == 3))
			) {
				this.orderStatus = 20;
			} else if (
				((item.wedding.status == 1 && (item.wedding.u_type == 1 || item.wedding.u_type == 0)) || (item.wedding.status == 2 && item.wedding.u_type == 3)) &&
				item.state !== 7
			) {
				this.orderStatus = 1;
			} else if ((item.wedding.status == 2 && (item.wedding.u_type == 1 || item.wedding.u_type == 0)) || (item.wedding.status == 3 && item.wedding.u_type == 3)) {
				this.orderStatus = 2;
			} else if ((item.wedding.status == 3 && (item.wedding.u_type == 1 || item.wedding.u_type == 0)) || (item.wedding.status == 4 && item.wedding.u_type == 3)) {
				this.orderStatus = 3;
			} else if (item.wedding.u_type == 1 && item.wedding.status == 4) {
				this.orderStatus = 4;
			}
			//手动更改 订单状态 调试
			// this.orderStatus = 4;
		},
		// 商家管理操作订单
		handle(item, status, t_status) {
			if (this.orderStatus == -1) {
				return;
			}
			let arr = {
				10: 6,
				20: 1,
				1: 2,
				2: 3,
				3: 4
			};

			this.data = {
				id: item.wedding.id,
				status: arr[this.orderStatus], //10：待排期 20：待拍摄 1：已拍摄待选样 2：已选样待看板 3：已看板待取件 4：已取件已结束
				user_id: uni.getStorageSync('userInfo').id,
				iden: 0
			};
			console.log(this.data);
			if (status == 3) {
				this.data.t_status = t_status; //0看板1不看版
			}
			this.$refs['confirm'].open();
		},
		confirmHandle() {
			this.$request({
				url: 'wedding/appointment_status_update',
				method: 'POST',
				data: this.data
			}).then((res) => {
				this.updateOrderInfo();
				this.$refs['end'].open();
			});
		},
		cencle() {
			this.$refs['confirm'].close();
			this.$refs['end'].close();
		},
		cencle2() {
			this.$refs['confirm'].close();
			uni.navigateBack({
				delta: 1
			});
			this.$refs['end'].close();
		},
		// 更新订单数据
		updateOrderInfo() {
			this.orderInfo.wedding.u_type = 3;
		}
	}
};
</script>
<style>
page {
	background: #f4f5f9;
}
</style>
<style scoped lang="scss">
// 滑动选择器
.picker-view {
	width: 248rpx;
	height: 372rpx;
}

.picker-item {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex {
	display: flex;
}

.flex-1 {
	flex: 1;
}

.flex-clum {
	flex-direction: column;
}

.align-center {
	align-items: center;
}

.justify-around {
	// justify-content: space-around;
	justify-content: space-evenly;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-end {
	justify-content: end;
}
.title {
	font-size: 26rpx;
	font-weight: 500;
	color: #666;
	max-width: 100%;
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.label {
	width: 140rpx;
	color: #888;
	text-align: justify;
	text-align-last: justify;
}
.bold {
	color: #000;
}
.msg {
	padding-left: 20rpx;
	font-size: 22rpx;
	color: #444;
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.time {
	font-size: 22rpx;
	color: #444;
	margin-left: 12rpx;
	padding-right: 20rpx;
}
.pre-pay {
	text-align: center;
	font-weight: bold;
	color: #fff;
}
.orderDetails {
	background: #fff;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	padding: 32rpx 50rpx 26rpx 32rpx;
	margin: 0 32rpx;
	margin-bottom: 2rpx;
	margin-top: -28rpx;
	.shoppic {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
	}
	.shopname {
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
		margin-left: 16rpx;
	}
	.pic {
		width: 164rpx;
		height: 164rpx;
		border-radius: 8rpx;
	}
}
.status {
	border-radius: 0px 0px 24rpx 24rpx;
	background: #ebbe87;
	padding: 48rpx 83rpx 76rpx 83rpx;
}
.orderInfo {
	border-radius: 16rpx;
	margin: 20rpx 32rpx 0 32rpx;
	padding: 28rpx 20rpx;
	background: #fff;
	.align-center {
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}
}
</style>
